<script setup lang="ts">
import { ref, watch } from "vue";

const visible = defineModel<boolean>({ default: true });

defineProps<{
  src?: string;
}>();

const time = ref(5);

let timer;

const createTime = () => {
  timer = setInterval(() => {
    if (time.value == 0) {
      clear();
    }

    time.value--;
  }, 1000);
};

const clear = () => clearInterval(timer);

watch(visible, (flag) => {
  if (flag) {
    createTime();
  } else {
    clear();
  }
});
</script>

<!-- 使用 catchMove 来阻止底层滚动 -->
<template>
  <view
    v-if="visible"
    class="fixed flex-center top-0 left-0 w-full h-full bg-black/30 z-30"
    :catchMove="false"
  >
    <view class="relative">
      <view
        class="absolute top-3 right-3 rounded-full bg-black/70 text-sm px-3 py-1 text-white"
        @tap="visible = false"
        >关闭
      </view>

      <image
        src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1rqDvv.img?w=768&h=930&m=6"
        class="w-[720px]"
        mode="widthFix"
      />
    </view>
  </view>
</template>
